<template>
  <div>
    <!-- 查找栏 -->
    <el-input
      placeholder="请输入服务器名"
      v-model="input.searchkey"
      prefix-icon="el-icon-search"
      style="width: 300px; margin-left: -200px"
    >
    </el-input>
    <!-- 查找按钮 -->
    <el-button type="info" plain @click="find" style="margin-left: 10px"
      >查找</el-button
    >
    <!-- 新增按钮 -->
    <el-button type="info" plain @click="dialogFormVisible = true"
      >新增</el-button
    >
    <div style="height: 16px"></div>
    <!-- 显示列表 -->
    <template>
      <div class="table_all">
        <el-card shadow="hover" class="tebale_card">
          <el-table
            height="510px"
            :data="tableData"
            :row-style="getRowClass"
            :header-row-style="getRowClass"
            :header-cell-style="getRowClass"
          >
            <el-table-column prop="name" label="服务器名称"></el-table-column>
            <el-table-column prop="ip" label="服务器IP"></el-table-column>
            <el-table-column prop="state" label="服务器状态"></el-table-column>
            <el-table-column prop="mark" label="备注"></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="164px"
            ></el-table-column>
            <el-table-column prop="user" label="归属人"></el-table-column>
            <el-table-column prop="" label="操作" width="200px">
              <template slot-scope="scope">
                <div>
                  <el-button type="primary" @click="change(scope.row)"
                    >编辑</el-button
                  >
                  <el-button type="danger" @click="delet1(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </template>
    <!-- 分页栏 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="input.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="input.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="
        position: fixed;
        bottom: 10px;
        width: 90%;
        text-align: center;
        margin-left: -160px;
      "
      :total="total"
      color="rgba(0, 0, 0, 0.089)"
    >
    </el-pagination>
    <!-- 新增弹窗 -->
    <el-dialog
      title="新增服务器"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form :model="form">
        <el-form-item label="服务器名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务器IP" :label-width="formLabelWidth">
          <ip-address-input ref="ip" v-model="form.ip"></ip-address-input>
        </el-form-item>
        <el-form-item label="服务器状态" :label-width="formLabelWidth">
          <el-switch
            style="margin-left: -300px"
            v-model="value1"
            active-text="启用"
            inactive-text="禁用"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            maxlength="50"
            show-word-limit
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="form.mark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clean">取 消</el-button>
        <el-button type="primary" @click="adder">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible1" width="600px">
      <el-form :model="form1">
        <el-form-item label="服务器名称" :label-width="formLabelWidth">
          <el-input v-model="form1.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务器IP" :label-width="formLabelWidth">
          <el-input v-model="form1.ip" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务器状态" :label-width="formLabelWidth">
          <el-switch
            v-model="value1"
            active-text="启用"
            inactive-text="禁用"
            style="margin-left: -300px"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form1.mark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入IP地址输入组件
import ipAddressInput from "./ipAddressInput.vue";
export default {
  components: {
    ipAddressInput,
  },
  data() {
    return {
      states: ["启用", "禁用"],
      value1: false,
      requesturl: "/safesys/api/server/",
      total: 0,
      formLabelWidth: "100px",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      input: { pageNum: 1, pageSize: 5, searchkey: "" },
      tableData: [],
      form: { state: "禁用" },
      form1: {},
      interfaces: ["detail", "add", "del", "update", "search"],
    };
  },
  methods: {
    // 清空新增弹窗
    clean() {
      this.form = {};
      this.dialogFormVisible = false;
    },
    // 修改页数
    handleCurrentChange: function (currentPage) {
      this.input.pageNum = currentPage;
      this.CURD(this.interfaces[4], this.input, 1);
    },
    // 修改页面显示数量
    handleSizeChange: function (pagesize) {
      this.input.pageSize = pagesize;
      this.CURD(this.interfaces[4], this.input, 1);
    },
    // 修改表格背景色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:#ffffff00;";
    },
    // 查询方法
    find() {
      this.CURD(this.interfaces[4], this.input, 2);
    },
    // 新增方法
    adder() {
      if (
        this.$route.query.userName == "" ||
        this.$route.query.userName == undefined
      ) {
        this.$message({
          duration: 600,
          dangerouslyUseHTMLString: true,
          message: '<i class="el-icon-loading"></i>无效登录，正在返回',
        });
        setTimeout(() => {
          this.$router.push("/");
        }, 500);
      }
      this.form.state = this.value1 ? this.states[0] : this.states[1];
      this.CURD(this.interfaces[1], this.form, 3);
    },
    // 编辑方法
    edit() {
      this.form1.state = this.value1 ? this.states[0] : this.states[1];
      this.CURD(this.interfaces[3], this.form1, 3);
    },
    // 编辑之前
    change(row) {
      this.$axios
        .post(this.requesturl + this.interfaces[0], { id: row.id })
        .then((res) => {
          this.form1 = res.data.data;
          this.value1 = this.form1.state == this.states[0] ? true : false;
        });
      this.dialogFormVisible1 = true;
    },
    // 删除方法
    delet1(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.CURD(this.interfaces[2], { id: row.id }, 3);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除取消",
          });
        });
    },
    // 整合增删改查，用于axios请求数据
    CURD(url, operate, mod) {
      if (mod == 1) {
        this.$axios.post(this.requesturl + url, operate).then((res) => {
          this.tableData = res.data.data.list;
        });
      } else if (mod == 2 || mod == 3) {
        this.$axios.post(this.requesturl + url, operate).then((res) => {
          if (res.data.code == 1) {
            if (mod == 2) {
              this.tableData = res.data.data.list;
              this.total = res.data.data.total;
            }
            this.$message({
              duration: 500,
              message: "操作完成！",
            });
            if (mod == 3) {
              setTimeout(() => {
                window.location.reload();
              }, 500);
            }
          } else {
            this.$message({
              duration: 500,
              message: "操作失败！\t" + res.data.msg,
            });
          }
        });
      }
    },
  },

  created() {
    // 获取初始页面数据
    this.$axios
      .post(this.requesturl + this.interfaces[4], this.input)
      .then((res) => {
        this.total = res.data.data.total;
        this.tableData = res.data.data.list;
        this.form.user = this.$route.query.userName;
      });
  },
};
</script>
